import ReactEcharts from 'echarts-for-react';

class CallStatistic extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            option:{
                title: {
                    text: '呼叫数据统计',
                    left:'45%',
                    top:'10%',
                    textAlign:'center',
                },
                grid:{
                    left:'5%',
                    right:'5%'
                },
                tooltip: {},
                legend: {
                    data:['呼叫次数']
                },
                xAxis: {
                    data: ['']
                },
                yAxis: {},
                series: [{
                    name: '次数',
                    type: 'bar',
                    data: ['']
                }]
            },
            subtext:'',
            totalCallCount:0,
            SLICE_MODE_DAY:0,
            SLICE_MODE_HOUR:1
        }
    }

    init(commCode){
        let params = {};
        params.commCode = commCode;
        params.timeEnd = Math.ceil((new Date).getTime()/1000);
        params.timeStart = params.timeEnd - 3600*24*30;
        params.sliseMode = this.state.SLICE_MODE_DAY;
        this.updateData(params);
    }

    search(startTime,endTime,commCode,sliseMode){

        let params = {};

        if(startTime && endTime) {
            params.timeStart = startTime;
            params.timeEnd = endTime + 3600*24;
        }

        params.commCode = commCode;
        params.sliseMode = sliseMode;
        this.updateData(params);
    }

    updateData(params){

        postJson("/log/callLogs.x",$.param(params), (data) =>{
            let items = data.data.itemList;
            let xAxisData = new Array();
            let seriesData = new Array();
            this.state.totalCallCount = data.data.totalcount;
            if(items.length > 0){
                for(let i=0;i<items.length; i++) {
                    let itemDate = new Date();
                    itemDate.setTime(parseInt(items[i].startTime) * 1000);
                    let timeGap = parseInt(items[0].endTime) - parseInt(items[0].startTime);
                    let itemLabel;
                    if (timeGap > 5000) {
                        itemLabel = itemDate.getDate();
                        xAxisData[i] = (itemDate.getMonth()+1)+"月"+itemLabel+"日";
                    }
                    else if(timeGap > 1000) {
                        itemLabel = itemDate.getHours();
                        xAxisData[i] = itemDate.getDate()+"号"+itemLabel+"点";
                    }
                    seriesData[i]=parseInt(items[i].count);
                }

                this.updateOption(xAxisData,seriesData);
            }
        });

        postJson("/log/callLogStatstics.x",$.param(params), (data) => {
            let statistcs = data.data;
            this.state.subtext = "[呼叫总次数:"+statistcs.totalCount+"] ";

            let answerRate = statistcs.totalCount!=0?(statistcs.callAnswered * 100 / statistcs.totalCount).toFixed(2):0;
            this.state.subtext += " [接听:"+statistcs.callAnswered+"("+answerRate+"%)] ";

            let notFountRate = statistcs.totalCount!=0?(statistcs.hangupNotFound *100/ statistcs.totalCount).toFixed(2):0;
            this.state.subtext += " [对方不在线:"+statistcs.hangupNotFound+"("+notFountRate+"%)] ";

            let cancelRate = statistcs.totalCount!=0?(statistcs.hangupCancel *100/ statistcs.totalCount).toFixed(2):0;
            this.state.subtext += " [主呼挂断:"+statistcs.hangupCancel+"("+cancelRate+"%)] ";

            let rejectedRate = statistcs.totalCount!=0?(statistcs.rejected *100/ statistcs.totalCount).toFixed(2):0;
            this.state.subtext += " [被叫主挂:"+statistcs.rejected+"("+rejectedRate+"%)] ";

            let busyRate = statistcs.totalCount!=0?(statistcs.busy *100/ statistcs.totalCount).toFixed(2):0;
            this.state.subtext += " [被叫忙:"+statistcs.busy+"("+busyRate+"%)] ";

            let others = statistcs.totalCount!=0?100 - answerRate - notFountRate -cancelRate - rejectedRate - busyRate:0;
            this.state.subtext += " [其他:"+others.toFixed(2)+"%] ";
            this.setState({subtext:this.state.subtext});
        });
    }

    updateOption(xAxisData,seriesData){
        let option = {
                title: {
                    text: '呼叫数据统计',
                    show: true,
                    subtext:this.state.subtext,
                    left:'45%',
                    itemGap:20,
                    textAlign:'center',
                    top:'10%',
                    subtextStyle:{
                        color:'#000',
                        fontSize:14
                    }
                },
                grid:{
                    left:'5%',
                    right:'5%',
                    top:'35%',
                },
                tooltip: {},
                legend: {
                    data:['呼叫次数'],
                    show:true
                },
                xAxis: {
                    data: xAxisData
                },
                yAxis: {},
                series: [{
                    name: '次数',
                    type: 'bar',
                    data: seriesData
                }]
        }

        this.state.option = option;
        this.setState({});
    }

    render(){
        return  (
            <div>
                <ReactEcharts
                    option={this.state.option}
                    style={{height:'400px'}}
                    notMerge={true}
                    lazyUpdate={true}
                 />
            </div>
        )

    }
}

export {CallStatistic}